<template>
<div class="layout">
	<Row>
		<Col span="24">
			<Breadcrumb>
				<BreadcrumbItem to="/" @click.native="changeMenu"><Icon type="home"></Icon> 首页</BreadcrumbItem>
				<BreadcrumbItem>{{title}}</BreadcrumbItem>
			</Breadcrumb>
			<div class="cleaner10"></div>
		</Col>
		<Col span="12">
			<div>
				<Upload :show-upload-list="false" :max-size="5120" accept="image/*" :format="['jpg','jpeg','png','gif']"
				:on-format-error="onFormatError"
				:on-exceeded-size="onMaxSize"
				:action="uploadUrl" :on-progress="onUploadProgress" :on-success="onUploadSuccess" :on-error="onUploadError" >
					<Button type="success" style="width:100px"><Icon type="md-cloud-upload" size="20" />&nbsp;&nbsp;上传</Button>
				</Upload>
				<span class="text-help" style="margin-left:15px">大小不超过5M</span>
			</div>
			<div class="cleaner10"></div>
		</Col>
		<Col span="12">
			<div class="text-right">
				<span class="group-header">共{{imageTotal}}张图片</span>
				<Icon type="md-apps" size="25"/>
				<Icon type="md-menu" size="25" />
			</div>
			<div class="cleaner10"></div>
		</Col>
		<Col span="24">
			<div>
				<span class="group-header">分组</span>
				<RadioGroup v-model="tagsIndex" @on-change="onTagsChange">
					<Radio :label="0" >
						<span>全部图片 ({{imageTotal}})</span>
					</Radio>
					<Radio  v-for="(item,index) in tags" :key="index" :label="index+1" >
						<span>{{item.name}} ({{item.memo}})</span>
					</Radio>
				</RadioGroup>
				<!-- <Tag checkable color="primary" :name="index" @on-change="changeTagsChecked"  :checked="item.checked" >{{item.name}}</Tag> -->
			</div>
			<div class="cleaner10"></div>
		</Col>
	</Row>
	<div class="cleaner10"></div>
	<Row :gutter="8" type="flex"  align="bottom">
		<Col :xs="12" :sm="8" :md="6" :lg="4" v-for="(item,index) in imageList.data" :key="index">
			<div class="vcard">
				<div class="img-wrapper" :style="{backgroundImage:'url('+item.thumbnail||item.picture_path+')'}"></div>
				<!-- <img :src="item.thumbnail||item.picture_path" style="width:100%" /> -->
				<p class="text-ellipsis">{{item.title}}</p>
				<div class="upload-list-cover">
					<Icon type="ios-eye-outline" size="40"  @click.native="onImageView(item.url)"></Icon>
					<Icon type="ios-share-alt-outline" size="40" @click.native="onImageMove(0,index,item.type_id)"></Icon>
					<Icon type="ios-trash-outline" size="36" @click.native="onImageDelete(0,index,item.id)"></Icon>
					<Icon type="ios-pricetag-outline" size="36" @click.native="onImageRename(0,index,item.title)"></Icon>
		
				</div>
			</div>
		</Col>
	</Row>
	
	<div class="cleaner10"></div>
	<Page :page-size-opts=[18,36,54,72] @on-page-size-change="changePageSize" @on-change="changePage" :total="imageList.total" :page-size="imageList.pageSize" :current.sync="imageList.page" :transfer="true" show-elevator show-sizer></Page>
	
	<Modal v-model="imageDeleteVisible"  width="250" title="温馨提示">
        <div style="text-align:center">
            <p>删除后将无法恢复，确认删除？</p>
        </div>
        <div slot="footer">
            <Button type="error" size="large" long :loading="spinShow" @click="onImageDelete(1,0,'')">删除</Button>
        </div>
    </Modal>

	<Modal title="移动" v-model="imageMoveVisible" @on-ok="onImageMove(1,0,'')">
        <Select v-model="imageMove" style="width:100%">
			<Option :disabled="imageMoveCurrent==item.id" :value="item.id" v-for="(item,index) in tags" :key="index">{{item.name}}</Option>
		</Select>
    </Modal>
	
	<Modal title="重命名" v-model="imageRenameVisible" @on-ok="onImageRename(1,0,'')">
        <Input type="text" v-model="imageRename"></Input>
    </Modal>

	<Modal title="查看" v-model="imageVisible" :footer-hide="true">
        <img :src="imageUrl" style="width: 100%">
    </Modal>
</div>
</template>
<script>
// 引入子组件
import {mapState,mapGetters} from 'vuex'
import {Upload, RadioGroup, Radio, Avatar, Modal, Row, Col,  Button, Page, Breadcrumb, BreadcrumbItem, Icon, Select, Option, Input } from 'iview';
export default { 
	name:'images-index',
	components: {Upload, RadioGroup, Radio, Avatar, Modal, Row, Col,  Button, Page, Breadcrumb, BreadcrumbItem, Icon, Select, Option, Input},
	data () {
		return {
			title:'图片管理',
			tagsIndex:0,
			imageTotal:0,
			tags:[{id:0}],
			imageDelete:-1,
			imageDeleteVisible:false,
			imageMove:-1,
			imageMoveCurrent:0,
			imageMoveVisible:false,
			imageRenameVisible:false,
			imageRename:'',
			imageIndex:0,
			imageVisible:false,
			imageUrl:0,
			imageList:{}

		}
	},
	methods:{
		init:function(){
			let self=this
			self.$store.dispatch("setSpinShow",true)

			function action1(){return self.$http.get("/v1/pictures/groups",{params: { 'token': self.token }})}
			function action2(){return self.$http.get("/v1/pictures",{params: { 'token': self.token }})}
			
			self.$http.all([action1(),action2()])
			.then(self.$http.spread(function (response1,response2){
				if(200==response1.data.status && 0==response1.data.code && response1.data.data.length>0)
				{
					self.imageTotal=response1.data.total
					self.tags=response1.data.data

				}else{self.$Message.error(response1.data.message)}

				if(200==response2.data.status && 0==response2.data.code && response2.data.data.length>0)
				{
					self.imageList=response2.data

				}else{self.$Message.error(response1.data.message)}


				self.$store.dispatch("setSpinShow",false)

			})).catch(self.$http.spread(function (error1,error2) { 
				self.$Message.error(error1)
				self.$store.dispatch("setSpinShow",false)
			}))
		},
		changePage:function(){
			let self=this
			self.$store.dispatch("setSpinShow",true)
			self.$http.get("/v1/pictures",{params: { 'token': self.token, page:self.imageList.page, pageSize: self.imageList.pageSize}})
			.then(function(response){
				if(200==response.data.status && 0==response.data.code)
				{
					self.imageList=response.data

				}
				self.$store.dispatch("setSpinShow",false)
			}).catch(function(error){
				this.$Notice.info({title: error,desc:''});
				self.$store.dispatch("setSpinShow",false)
			})
		},
		changePageSize:function(val){
			let self=this
			self.imageList.pageSize=val
			self.$store.dispatch("setSpinShow",true)
			self.$http.get("/v1/pictures",{params: { 'token': self.token, page:1, pageSize: self.imageList.pageSize}})
			.then(function(response){
				if(200==response.data.status && 0==response.data.code)
				{
					self.imageList=response.data
				}
				self.$store.dispatch("setSpinShow",false)
			}).catch(function(error){
				this.$Notice.info({title: error,desc:''});
				self.$store.dispatch("setSpinShow",false)
			})
		},
		changeMenu:function(){
			this.$store.dispatch('setMenuActive','0')
			this.$store.dispatch('setMenuOpen', ['0'])
			return false;
		},
		onUploadProgress:function(response, file, fileList){
			this.$store.dispatch("setSpinShow",true)
		},
		onUploadSuccess:function(response, file, fileList){
			this.$store.dispatch("setSpinShow",false)
			if(response.code != 0 || response.status != 200){
				this.$Notice.error({title: '错误',desc:response.message})
				return
			}
			let _index=this.tagsIndex-1
			_index=_index<0?0:_index
			if(this.imageList.data.length<this.imageList.pageSize)
			{
				this.imageList.data.unshift(response.data)
				this.tags[_index].memo=parseInt(this.tags[_index].memo)+1
				this.imageTotal=this.imageTotal+1
			}else{
				this.imageList.data.unshift({id:1,order:0,type_name:this.tags[_index].name,title:file.name,picture_path:'',descript:'',created_at:0,url:response.data.url,thumbnail:response.data.thumbnail})
				this.imageList.data.pop();
				this.tags[_index].memo=parseInt(this.tags[_index].memo)+1
				this.imageTotal=this.imageTotal+1
			}
		},
		onUploadError:function(response, file, fileList){
			this.$store.dispatch("setSpinShow",false)
		},
		onImageView:function(url){
			this.imageUrl=url
			this.imageVisible=true
		},
		onImageMove:function(type,index,type_id){
			let self=this
			if(0==type){
				this.imageMove=null
				this.imageIndex=index
				this.imageMoveCurrent=type_id
				this.imageMoveVisible=true
			}else{
				self.$store.dispatch("setSpinShow",true)
				function action1(){return self.$http.post("/v1/pictures?_method=put&token="+self.token,{'id':self.imageList.data[self.imageIndex].id,'data':'{"type_id":"'+self.imageMove+'"}'})}
			
				self.$http.all([action1()])
				.then(self.$http.spread(function (response1){
					if(200==response1.data.status && 0==response1.data.code)
					{
						self.tags.forEach(item=>{
							if(item.id==self.imageMoveCurrent){item.memo=response1.data.data.srccount;}
							if(item.id==self.imageMove){item.memo=response1.data.data.dstcount;}
						})
						self.imageList.data[self.imageIndex].type_id=response1.data.data.type_id
						self.imageList.data[self.imageIndex].type_name=response1.data.data.type_name
						self.$Message.success("移动成功")

					}else{self.$Message.error(response1.data.message)}

					self.$store.dispatch("setSpinShow",false)

				})).catch(self.$http.spread(function (error1) { 
					self.$Message.error(error1)
					self.$store.dispatch("setSpinShow",false)
				}))
			}
		},
		onImageDelete:function(type,index,id){
			let self=this
			if(0==type){
				this.imageIndex=index
				this.imageDelete=id
				this.imageDeleteVisible=true
			}else{
				self.$store.dispatch("setSpinShow",true)
				function action1(){return self.$http.post("/v1/pictures?_method=delete&token="+self.token,{'id':self.imageDelete})}
			
				self.$http.all([action1()])
				.then(self.$http.spread(function (response1){
					if(200==response1.data.status && 0==response1.data.code)
					{
						let _type_id = self.imageList.data[self.imageIndex].type_id
						self.tags.forEach(item=>{
							if(item.id==_type_id){item.memo=(parseInt(item.memo)-1)+'';}
						})
						self.imageList.data.splice(self.imageIndex,1)
						self.$Message.success("删除成功")
						self.imageDeleteVisible=false
						self.imageTotal=self.imageTotal-1


					}else{self.$Message.error(response1.data.message)}

					self.$store.dispatch("setSpinShow",false)

				})).catch(self.$http.spread(function (error1) { 
					self.$Message.error(error1)
					self.$store.dispatch("setSpinShow",false)
				}))
			}
		},
		onImageRename:function(type,index,title){
			let self=this
			if(0==type){
				this.imageIndex=index
				this.imageRename=title
				this.imageRenameVisible=true
			}else{
				self.$store.dispatch("setSpinShow",true)
				function action1(){return self.$http.post("/v1/pictures?_method=put&token="+self.token,{'id':self.imageList.data[self.imageIndex].id,'data':'{"title":"'+self.imageRename+'"}'})}
			
				self.$http.all([action1()])
				.then(self.$http.spread(function (response1){
					if(200==response1.data.status && 0==response1.data.code)
					{
						self.imageList.data[self.imageIndex].title=self.imageRename
						self.$Message.success("重命名成功")

					}else{self.$Message.error(response1.data.message)}

					self.$store.dispatch("setSpinShow",false)

				})).catch(self.$http.spread(function (error1) { 
					self.$Message.error(error1)
					self.$store.dispatch("setSpinShow",false)
				}))
			}
		},
		onTagsChange:function(val){
			let self=this
			self.$store.dispatch("setSpinShow",true)
			let _id = 0
			if(0<val){ _id = self.tags[val-1].id}
			function action1(){return self.$http.get("/v1/pictures",{params: { 'token': self.token, page:1, pageSize: self.imageList.pageSize
			,search:{type_id:_id} }})}
			
			self.$http.all([action1()])
			.then(self.$http.spread(function (response1,response2){
				if(200==response1.data.status && 0==response1.data.code )
				{
					self.imageList=response1.data

				}else{self.$Message.error(response1.data.message)}


				self.$store.dispatch("setSpinShow",false)

			})).catch(self.$http.spread(function (error1) { 
				self.$Message.error(error1)
				self.$store.dispatch("setSpinShow",false)
			}))
		},
		onFormatError:function(){this.$Message.error('图片格式错误')},
		onMaxSize:function(){this.$Message.error('图片大小超出了最大值')}


	},
	created:function(){
	},
	mounted () {
		this.init()
    	this.setTitle(this.title)
	},
	activated:function(){
		// this.init()
	},
	computed:{
		...mapGetters(['token','spinShow']),
		uploadUrl:function(){
			let _index=this.tagsIndex-1
			_index=_index<0?0:_index
			return this.$http.defaults.baseURL+'/v1/pictures/upload?token='+this.$store.getters.token+'&gid='+this.tags[_index].id
		},
	}
}



</script>
<style lang="less" scoped>
.group-header{font-size:16px;position:relative;top:2px;margin-right:10px;}

.vcard{
	margin-bottom:15px;padding:5px;
	
	.upload-list-cover{
        display: none;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
		background: rgba(0,0,0,.5);
		text-align: center;
		i{
			color: #fff;
			font-size: 20px;
			cursor: pointer;
			margin: 0 2px;
			position:relative;
			top:35%;
		}
	}

	.img-wrapper{
		width:180px;height:180px;background-size: cover;
	}
}
.vcard:hover .upload-list-cover{
        display: block;
}

</style>